<template>
  <view class="hot-container">
    <!-- 搜索栏 -->
    <view class="search-bar">
      <u-search
        v-model="searchKeyword"
        placeholder="搜索商品"
        :show-action="false"
        @search="handleSearch"
      ></u-search>
    </view>

    <!-- 商品列表 -->
    <scroll-view 
      class="product-list-scroll" 
      scroll-y
      @scrolltolower="loadMore"
      refresher-enabled
      :refresher-triggered="isRefreshing"
      @refresherrefresh="onRefresh"
    >
      <!-- 加载中 -->
      <u-loading v-if="isLoading && page === 1" mode="circle" color="#ff5500"></u-loading>
      
      <!-- 空状态 -->
      <u-empty
        v-else-if="!isLoading && productList.length === 0"
        mode="data"
        icon="http://cdn.uviewui.com/uview/empty/data.png"
        text="暂无商品"
      ></u-empty>

      <!-- 商品列表 -->
      <view class="product-list" v-else>
        <view
          class="product-item"
          v-for="(item, index) in productList"
          :key="index"
          @click="navigateToDetail(item.id)"
        >
          <image :src="item.image" mode="aspectFill" class="product-image"></image>
          <view class="product-info">
            <text class="product-title">{{ item.title }}</text>
            <text class="product-desc">{{ item.description }}</text>
            <view class="product-meta">
              <text class="product-price">¥{{ item.price }}</text>
              <text class="product-sales">已售 {{ item.sales }}</text>
            </view>
            <view class="product-actions">
              <button 
                class="buy-btn" 
                @click.stop="handleBuy(item)"
              >立即购买</button>
            </view>
          </view>
        </view>
      </view>

      <!-- 加载更多 -->
      <u-loadmore
        :status="loadMoreStatus"
        @loadmore="loadMore"
      ></u-loadmore>
    </scroll-view>
  </view>
</template>

<script>
import { checkLogin } from '@/utils/auth'
import api from '@/config/api'
export default {
  data() {
    return {
      searchKeyword: '',
      productList: [],
      page: 1,
      pageSize: 10,
      hasMore: true,
      isRefreshing: false,
      loadMoreStatus: 'loadmore',
      isLoading: false
    }
  },
  onLoad() {
    this.loadProducts()
  },
  methods: {
    async loadProducts() {
      if (this.isLoading) return
      
      this.isLoading = true
      try {
        // 使用个性化推荐系统的热销商品API
        const res = await api.userBehavior.getHotProducts()
        
        if (res.code === 200 && res.data) {
          this.productList = res.data.map(item => ({
            id: item.id,
            title: item.name,
            description: item.subtitle || '',
            price: item.price,
            image: item.mainImage,
            sales: item.sales || 0
          }))
        }
        
        this.hasMore = false // 后端不支持分页，所以设置hasMore为false
        this.loadMoreStatus = 'nomore'
      } catch (error) {
        console.error('加载热销商品失败:', error)
        uni.showToast({
          title: '加载失败',
          icon: 'none'
        })
      } finally {
        this.isLoading = false
        this.isRefreshing = false
      }
    },
    handleSearch() {
      // 热销商品不支持搜索，所以这里不做任何操作
      uni.showToast({
        title: '热销商品暂不支持搜索',
        icon: 'none'
      })
    },
    onRefresh() {
      this.isRefreshing = true
      this.productList = []
      this.loadProducts()
    },
    loadMore() {
      // 热销商品不支持分页，所以这里不做任何操作
      uni.showToast({
        title: '已加载全部商品',
        icon: 'none'
      })
    },
    navigateToDetail(id) {
      uni.navigateTo({
        url: `/pages/product/detail/index?id=${id}`
      })
    },
    handleBuy(product) {
      if (!checkLogin()) return
      
      // 跳转到确认订单页
      uni.navigateTo({
        url: `/pages/order/confirm/index?productId=${product.id}`
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.hot-container {
  min-height: 100vh;
  background-color: #f5f5f5;
  display: flex;
  flex-direction: column;
}

.search-bar {
  background-color: #ffffff;
  padding: 20rpx;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
}

.product-list-scroll {
  flex: 1;
  height: calc(100vh - 180rpx);
  background-color: #ffffff;
}

.product-list {
  padding: 20rpx;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20rpx;
}

.product-item {
  background-color: #ffffff;
  border-radius: 12rpx;
  overflow: hidden;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
  transition: all 0.3s;

  &:active {
    transform: scale(0.98);
    opacity: 0.9;
  }

  .product-image {
    width: 100%;
    height: 345rpx;
    background-color: #f5f5f5;
  }

  .product-info {
    padding: 20rpx;

    .product-title {
      font-size: 28rpx;
      color: #333;
      @include text-ellipsis(2);
      margin-bottom: 10rpx;
      line-height: 1.4;
    }

    .product-desc {
      font-size: 24rpx;
      color: #999;
      @include text-ellipsis(1);
      margin-bottom: 10rpx;
    }

    .product-meta {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .product-price {
        font-size: 32rpx;
        color: #ff5500;
        font-weight: bold;
      }

      .product-sales {
        font-size: 24rpx;
        color: #999;
      }
    }
  }
}

.product-actions {
  margin-top: 20rpx;
  display: flex;
  justify-content: flex-end;
  
  .buy-btn {
    background-color: #ff5500;
    color: #ffffff;
    font-size: 24rpx;
    padding: 10rpx 30rpx;
    border-radius: 30rpx;
    border: none;
    
    &:active {
      opacity: 0.9;
    }
  }
}
</style> 